<template>
  <el-button
    v-bind="$attrs"
    :type="type"
    :size="size"
    :loading="loading"
    :disabled="disabled"
    :class="buttonClass"
    @click="handleClick"
  >
    <slot />
  </el-button>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
  size?: 'large' | 'default' | 'small'
  loading?: boolean
  disabled?: boolean
  variant?: 'default' | 'outline' | 'text'
}

const props = withDefaults(defineProps<Props>(), {
  type: 'default',
  size: 'default',
  loading: false,
  disabled: false,
  variant: 'default'
})

const emit = defineEmits<{
  click: [event: MouseEvent]
}>()

const buttonClass = computed(() => {
  const classes = []
  
  if (props.variant === 'outline') {
    classes.push('base-button--outline')
  } else if (props.variant === 'text') {
    classes.push('base-button--text')
  }
  
  return classes
})

const handleClick = (event: MouseEvent) => {
  if (!props.loading && !props.disabled) {
    emit('click', event)
  }
}
</script>

<style scoped lang="scss">
.base-button--outline {
  border: 1px solid var(--el-color-primary);
  background-color: transparent;
  color: var(--el-color-primary);
  
  &:hover {
    background-color: var(--el-color-primary);
    color: white;
  }
}

.base-button--text {
  border: none;
  background-color: transparent;
  color: var(--el-color-primary);
  
  &:hover {
    background-color: var(--el-color-primary-light-9);
  }
}
</style>
